{% extends "./nav.html" %} {% set isNav = true %} {% block content %}
<div class="container">

    <h5>基本信息</h5>
    <br />
    <form class="row form">

        <div class="form-group">
            <label for="input-username">昵称</label>
            <input type="text" class="form-control" id="input-nick" placeholder="请输入昵称" value="{{userInfo.nickName}}" />
        </div>

        <div class="form-group">
            <label for="input-password">城市</label>
            <input type="text" class="form-control" id="input-city" placeholder="请输入城市" value="{{userInfo.city}}" />
        </div>

        <div class="form-group">
            <label for="repeat-input-password">头像</label>
            <div class="col-sm-10">
                <img src="{{userInfo.avatar}}" style="width: 100px" class="margin-bottom-10" id="img-picture" />
                <input type="file" class="form control-file" accept=" image /*" id="file-picture" />
            </div>
            <br />
            <center>
                <button type="submit" class="btn btn-primary register" id="btn-submit-info">保存</button>
            </center>
            <br />
            <hr />
            <h5>修改密码</h5>
            <br />
            <div class="form-group">
                <label for="input-password">当前密码</label>
                <input type="password" class="form-control" id="input-password" placeholder="请输入当前密码" />
            </div>

            <div class="form-group">
                <label for="repeat-input-password">新密码</label>
                <input type="password" class="form-control" id="repeat-input-password" placeholder="请输入新密码" />
            </div>

            <div class="form-group">
                <label for="repeat-input-password">确认密码</label>
                <input type="password" class="form-control" id="repeat-input-password-repeat" placeholder="请输入确认密码" />
                <br />
                <center>
                    <button type="submit" class="btn btn-primary register" id="btn-submit-password">提交</button>
                </center>
                <br />
                <center>
                    <button type="submit" class="btn btn-primary register" id="btn-logout">
            退出登录
          </button>
                </center>


            </div>

        </div>

    </form>
</div>

{% endblock %} {% block js %}
<script>
    $("#file-picture").change(function() {
            // console.log(111);
            // 新建表单对象
            // const formData = new FormData(); // 新建表单对象
            // 发送给后台的数据data
            const file = $(this)[0].files[0]; // 获取图片信息
            // formData.append("file", data); // 将图片信息添加到表单对象中
            ajax.upload("/api/upload", file, function(err, data) {
                    if (err) {
                        alert(err);
                        return;
                    }
                    // 否则
                    //将图片地址变更 data.url
                    console.log(file);
                    $("#img-picture").attr("src", data.url);
                })
                // ajax上传formData
                //     $.ajax({
                //         type: "post",
                //         url: "/api/upload",
                //         //data:data;
                //         data: formData, // {key:"value"}或者  key=value&key2=value2
                //         contentType: false, // 发送信息至服务器时内容编码类型。默认值“application/x-www-from-urlencoded”
                //         processData: false, // 默认是true，会根据data的值来转换为查询字符串，如果要传递dom树或者不希望转换的信息，值应该为false
                //         success(res) {
                //             console.log(res);
                //             if (res.errno === 0) {
                //                 // console.log(111);
                //                 // 将图片地址变更 res.data.url
                //                 $("#img-picture").attr("src", res.data.url);

            //             }
            //         },
            //         error(err) {
            //             alert("上传图片失败，图片过大或者是图片格式不对")
            //         }
            //     })
        })
        //更改基本信息
    $("#btn-submit-info").click(function(e) {
            e.preventDefault();
            // 获取基本信息 昵称 城市 头像的 url
            const newNickName = $("#input-nick").val();
            const newCity = $("#input-city").val();
            const newAvatar = $("#img-picture").attr("src");
            // 发送数据
            ajax.post("/api/user/changeUserInfo", {
                        nickName: newNickName,
                        city: newCity,
                        avatar: newAvatar,
                    },
                    function(err, data) {
                        if (err) {
                            alert(err);
                            return;
                        }
                        alert("更新用户信息成功！")

                    })
                //     $.ajax({
                //         type: "post",
                //         url: "/api/user/changeUserInfo",
                //         data: {
                //             nickName: newNickName,
                //             city: newCity,
                //             avatar: newAvatar,
                //         },
                //         success(res) {
                //             console.log(res);
                //             if (res.errno === 0) {
                //                 alert("更新用户信息成功！")
                //             } else {
                //                 alert("更新用户信息失败！")
                //             }
                //         },
                //         error(err) {
                //             alert("更改用户信息失败！")
                //         }
                //     })


        })
        // 更改密码
    $("#btn-submit-password").click(function(e) {
            //阻止默认行为
            e.preventDefault();
            const oldPassword = $("#input-password").val();
            const newPassword = $("#repeat-input-password").val();
            const newRepeatPassword = $("#repeat-input-password-repeat").val();
            //判断原密码和新密码是否一致
            if (oldPassword === newPassword) {
                alert("更改密码失败，两次密码一致");
                return;
            }
            //确认密码时，判断两次密码一致
            if (newPassword !== newRepeatPassword) {
                alert("更改密码失败，新密码两次输入值不匹配");
                return;
            }
            //发送数据
            ajax.post("/api/user/changePassword", {
                    oldPassword,
                    newPassword
                }, function(err, data) {
                    if (err) {
                        alert(err);
                        return;
                    }
                    // 清空表单
                    alert("修改密码成功")
                    $("#input-password").val("");
                    $("#repeat-input-password").val("");
                    $("#repeat-input-password-repeat").val("");
                })
                // $.ajax({
                //     type: "post",
                //     url: "/api/user/changePassword",
                //     data: {
                //         oldPassword,
                //         newPassword
                //     },
                //     success(res) {
                //         console.log(res);
                //         if (res.errno === 0) {
                //             alert("修改密码成功")
                //             $("#input-password").val("");
                //             $("#repeat-input-password").val("");
                //             $("#repeat-input-password-repeat").val("");
                //         } else {
                //             alert("修改密码失败")
                //         }
                //     },
                //     error(err) {
                //         console.log(err);
                //     }
                // })
        })
        //退出登录
    $("#btn-logout").click(function() {
        if (confirm("您是否要退出登陆") == false) {
            return;
        }
        // 触发注销的路由
        ajax.post("/api/user/logout", function(err, data) {

                if (err) {
                    alert(alert);
                    return;
                }
                alert("退出成功")
                location.href = "/login";
            })
            // $.ajax({
            //     type: "post",
            //     url: "/api/user/logout",
            //     success(res) {
            //         alert("退出成功");
            //         // 返回登录页面
            //         location.href = "/login";
            //     },
            //     error(err) {
            //         alert(err)
            //     }
            // })
    })
</script>
{% endblock %}